<template>
	<view class="mygroup">
		<u-navbar left-icon-color="#fff" :placeholder="true" :bgColor="bgColor" :autoBack="true">
			<view class="navtitle" slot="center">我的群聊</view>
		</u-navbar>
		<view v-if="userList.length > 0">
			<view class="anchor-list" v-for="(item, index) in userList" @click="gochat(item)" :key="index">
				<view class="anchor-left">
					<u-image :showLoading="true" radius="10" src="/static/chat/logo.png"
						loadingIcon="/static/chat/logo.png" errorIcon="/static/chat/logo.png" width="50px"
						height="50px">
					</u-image>
				</view>
				<view class="anchor-right">{{item.name}}</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="list" text="群聊列表为空" :marginTop="100" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'rgba(0,0,0,0.0)',
				userList: [],
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('info')
			this.postinfo()
		},
		methods: {
			gochat(item) {
				uni.navigateTo({
					url: `/pages/chat/groupchat/index?groupid=${item.id}&name=${item.name}`
				});
			},
			postinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/rong/getGroupList',
					data: {
						use_id: this.userinfo.member_id,
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.userList = res.data.groups
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #17191A;
	}
</style>
<style scoped lang="scss">
	.mygroup {
		.navtitle {
			color: #fff;
		}

		.anchor-list {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;

			.anchor-left {
				width: 10%;
			}

			.anchor-right {
				width: 85%;
				color: #fff;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>